<template>
  <Card v-bind="$attrs" style="background: #f0f2f5">
    <CardGrid
      v-for="(item, index) in StatusItems"
      :key="index"
      :style="{
        width: '47%',
        height: '120px',
        margin: computedMargin,
        background: '#fff',
        borderRadius: '5px',
        position: 'relative',
        overflow: 'hidden',
      }"
    >
      <span class="flex flex-col items-center">
        <span class="text-[18px] font-bold truncate">
          {{ item.title }}
        </span>
        <CountTo
          suffix="个"
          :color="item.color"
          :startVal="0"
          :endVal="item.value"
          :duration="3000"
          style="font-size: 20px"
        />
      </span>
      <!-- 底部柱状条 -->
      <div
        :style="{ background: item.color }"
        style="height: 10px; width: 100%; position: absolute; bottom: 0; left: 0"
      ></div>
    </CardGrid>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, computed, onMounted, onUnmounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { StatusItems } from './data';
  import { CountTo } from '/@/components/CountTo/index';
  const CardGrid = Card.Grid;

  const windowWidth = ref(window.innerWidth);

  // 监听窗口大小变化
  const updateWindowWidth = () => {
    windowWidth.value = window.innerWidth;
  };

  // 计算 margin 值
  const computedMargin = computed(() => {
    if (windowWidth.value > 1900) {
      return '5px 6px';
    } else if (windowWidth.value > 1100) {
      return '5px 3px';
    } else {
      return '1px'; // 默认值
    }
  });

  onMounted(() => {
    window.addEventListener('resize', updateWindowWidth);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWindowWidth);
  });
</script>
